<template>
  <div id="discuss">
    <say-info-list id="saySpace"
                   :discussListOpen= "discussListOpen"/>
    <div id="discussList" v-if="!isDiscussShow">
      <div id="addNewDiscuss" v-if="loginState">
        <svg t="1622708338724" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3627" width="35" height="35"><path d="M883.7 301.2H532.3c-42.7 3.9-76.3 39.9-76.3 83.5V664.4c0 46.3 37.7 83.9 84 83.9h75.8L792 891V748.4h84c46.3 0 84-37.6 84-83.9V384.8c0-43.7-33.6-79.7-76.3-83.6z" fill="var(--theme-fontMain)" p-id="3628"></path><path d="M530.5 261.2H680v-44.3c0-46.3-37.7-83.9-84-83.9H148c-46.3 0-84 37.7-84 83.9v335.7c0 46.3 37.7 83.9 84 83.9h28v142.1l177.8-142.1H416V384.8c0-31.1 11.6-60.8 32.7-83.7 20.9-22.8 49.3-36.8 80-39.6l1.8-0.3z" fill="var(--theme-fontMain)" p-id="3629"></path></svg>
      </div>
      <div id="addDiscussBox" v-if="loginState" class="boxShadow-white animate__animated animate__zoomIn" style="animation-duration: 300ms">
        <span>讨论内容</span><br>
        <textarea class="input-100" cols="30" rows="10" placeholder="请自觉遵守社区规则，切勿发布违禁内容。"/><br>
        <button class="button button-color-white" @click="pushDiscuss">发布</button><br>
      </div>
      <div id="discussMainBox" class="animate__animated animate__bounceIn" style="animation-duration: 500ms" v-for="(List, index) in discussList" :key="List.discussId">
        <div id="more" style="width: 20px;height: 20px;position: absolute;right: 10px;top: 10px" @click="openMore(index)">
          <svg t="1621433758830" id="moreIcon" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2354" width="20" height="20"><path d="M510.8 799.6m-101.3 0a101.3 101.3 0 1 0 202.6 0 101.3 101.3 0 1 0-202.6 0Z" p-id="2355"></path><path d="M510.8 515.9m-101.3 0a101.3 101.3 0 1 0 202.6 0 101.3 101.3 0 1 0-202.6 0Z" p-id="2356"></path><path d="M510.8 199.7m-101.3 0a101.3 101.3 0 1 0 202.6 0 101.3 101.3 0 1 0-202.6 0Z" p-id="2357"></path></svg>        </div>
        <div id="openMore"><ul :class="{'isMoreOpen': List.isMoreOpen}" class="boxShadow-white" style="display:none;font-size:12px;position: absolute;right: 4px;top: 35px;padding: 5px 0;border-radius: 4px;">
          <li v-if="List.userId !== userId && loginState" @click="complaintDisc(index)">举报</li>
          <li v-if="List.userId === userId" @click="deleteDisc(index)">删除</li>
          <li>复制</li>
        </ul></div>
        <div id="discussUser"><img class="headImg-35 toRight-20" :src="List.headImg" alt=""><div style="display: flex; flex-flow: column;justify-content: space-between"><span class="toRight-10" style="font-size: 16px; font-weight: 700;align-self: flex-start ">{{List.nickname}}</span><span class="toRight-10" style="font-size: 14px;align-self: flex-start;">{{List.pushTime}}</span></div></div>
        <div class="discussBox">
        <div class="discussInfo">
<!--          <h1>{{List.title}}</h1>-->
          <h4 id="InfoGame">{{List.discussContent}}</h4>
        </div>
        <!--        <div id="openIcon">{{List.openText}}</div>-->
        <div class="functionBox">
          <ul>
            <li class="niceBox" :class="{'liked': List.liked}" @click="likeClick(index)">
              <svg class="likedIcon" t="1622697192213" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2400" width="15" height="15"><path d="M884.875894 423.143253 646.970506 423.143253c92.185562-340.464205-63.516616-357.853247-63.516616-357.853247-65.993017 0-52.312436 52.182476-57.3031 60.881602 0 166.502152-176.849824 296.971645-176.849824 296.971645l0 472.171899c0 46.607504 63.516616 63.393819 88.433098 63.393819l357.452111 0c33.641191 0 61.036122-88.224344 61.036122-88.224344 88.434122-300.70569 88.434122-390.177444 88.434122-390.177444C944.657442 418.179195 884.875894 423.143253 884.875894 423.143253L884.875894 423.143253 884.875894 423.143253zM884.875894 423.143253" p-id="2401"></path><path d="M251.671415 423.299819 109.214912 423.299819c-29.420053 0-29.873378 28.89612-29.873378 28.89612l29.420053 476.202703c0 30.309306 30.361495 30.309306 30.361495 30.309306L262.420223 958.707948c25.686009 0 25.458835-20.049638 25.458835-20.049638L287.879058 459.411271C287.879058 422.837284 251.671415 423.299819 251.671415 423.299819L251.671415 423.299819 251.671415 423.299819zM251.671415 423.299819" p-id="2402"></path></svg>
              <span v-if="List.likeNum !== '0'">{{List.likeNum}}</span><span style="right: 10px;" v-if="List.likeNum === '0'">点赞</span>
            </li>
<!--            <li id="sucksBox" :class="{'disliked': List.disliked}" @click="dislikeClick(index)"><span>踩{{List.dislikeNum}}</span></li>-->
            <li id="saySomething" class="saySomething" @click="showDiscussButton(index)">
              <svg t="1622697478142" viewBox="0 0 1212 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3910" width="15" height="15"><path d="M165.267915 826.339574l155.186572 180.417474c19.83215 23.082419 52.555197 22.862062 72.552615 0L550.893049 826.339574l605.817086 0C1187.229611 826.339574 1211.964708 801.604476 1211.964708 770.864644L1211.964708 55.530019C1211.964708 24.845277 1187.780504 0 1156.765225 0L55.199484 0C24.735098 0 0 24.735098 0 55.530019l0 715.334624C0 801.494297 24.404562 826.339574 55.034216 826.339574L165.267915 826.339574zM220.35722 232.587045C220.35722 225.86615 225.811061 220.35722 232.476867 220.35722l691.92167 0C931.174521 220.35722 936.518184 225.811061 936.518184 232.587045l0 30.629654C936.518184 269.937594 931.064343 275.446525 924.398537 275.446525L232.476867 275.446525C225.700882 275.446525 220.35722 269.992683 220.35722 263.216699L220.35722 232.587045zM220.35722 397.85496C220.35722 391.134065 225.811061 385.625134 232.476867 385.625134l691.92167 0C931.174521 385.625134 936.518184 391.078976 936.518184 397.85496l0 30.629654C936.518184 435.205509 931.064343 440.714439 924.398537 440.714439L232.476867 440.714439C225.700882 440.714439 220.35722 435.260598 220.35722 428.484614L220.35722 397.85496zM220.35722 563.122875C220.35722 556.40198 225.535614 550.893049 231.870884 550.893049l472.776415 0C710.92748 550.893049 716.160964 556.34689 716.160964 563.122875l0 30.629654C716.160964 600.473424 710.982569 605.982354 704.647299 605.982354L231.870884 605.982354C225.590704 605.982354 220.35722 600.528513 220.35722 593.752529L220.35722 563.122875z" p-id="3911"></path></svg>
            </li>
          </ul>
        </div>
      </div>
      </div>
    </div>
    <LoadingComponent class="loadingCom" v-if="isLoading"/>
    <div v-if="discussList.length === 0" style="width: 100%;display: flex;justify-content: center;align-items: center;flex-flow: column">
        <img src="../../assets/icon/nullImg_2.svg" style="width: 300px;height: 300px;" alt="">
        <span style="font-weight: 200;color: #bfc9d9">快发布第一条讨论！</span>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import LoadingComponent from "../LoadingError/LoadingComponent";

  export default {
    name: 'discuss',
    props: ["pushGameId","pushMovieId","pushMusicId"],
    data(){
      return{
        discussList: [],
        isLoading: false,
        isDiscussShow: false,
        sayListIndex: String,
        isSayShow: false,
        loginState: false,
        discussListOpen: {},
        userId: '',
        // sayObj:{
        //   userId: sessionStorage.user.userId,
        //   discussId:this.discussList
        // }
      }
    },
    watch:{
      pushGameId: function(val){
        this.getGamesDiscuss(val)
      },
      pushMovieId: function(val){
        this.getMoviesDiscuss(val)
      },
      pushMusicId: function(val){
        this.getMusicDiscuss(val)
      },
        deep: true,
        immediate: true,
    },

    components:{
      sayInfoList: () => import(/* webpackChunkName: "sayInfoList" */'./sayInfoList'),
      LoadingComponent,
    },

    methods: {
      async deleteDisc(index){
        const discussMainBox = document.getElementById('discussMainBox')
        const type = this.getDiscussType()
        const userRoot = await this.userRoot()
        if(userRoot === 400){
          this.$message.error('账号已封禁,无法操作')
          return false
        }else{
          if(type === 'movie'){
            this.$confirm('是否删除该讨论?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消', type: 'warning'}).then(()=>{
              discussMainBox.setAttribute("class", "animate__animated animate__bounceOut")
              setTimeout(() =>{
                (async() =>{
                  await this.deleteMovieDiscuss(index)
                })()
              },500)
            }).catch(()=>{
            })
          }
          if(type === 'game'){
            this.$confirm('是否删除该讨论?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消', type: 'warning'}).then(()=>{
              discussMainBox.setAttribute("class", "animate__animated animate__bounceOut")
              setTimeout(() =>{
                (async() =>{
                  await this.deleteGameDiscuss(index)
                })()
              },500)
            }).catch(()=>{
            })

          }
          if(type === 'music'){
            this.$confirm('是否删除该讨论?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消', type: 'warning'}).then(()=>{
              discussMainBox.setAttribute("class", "animate__animated animate__bounceOut")
              setTimeout(() =>{
                (async() =>{
                  await this.deleteMusicDiscuss(index)
                })()
              },500)
            }).catch(()=>{
            })
          }
        }
        // console.log(this.discussList[index].discussId)
      },
      async deleteMovieDiscuss(movieDiscussId){
        // if(window.confirm('你确定要删除吗？')){
          const {data:res} = await this.$axios.post('v1/deleteDiscuss',{discussId:this.discussList[movieDiscussId].discussId})
          if(res.code === 200){
            this.$message.success('删除成功')
            this.getMoviesDiscuss(this.pushMovieId)
          }
        // }else{
        //   return false;
        // }
      },
      async deleteGameDiscuss(gameDiscussId){
        // if(window.confirm('你确定要删除吗？')){
          const {data:res} = await this.$axios.post('v1/deleteGameDiscuss',{discussId:this.discussList[gameDiscussId].discussId})
          if(res.code === 200){
            this.$message.success('删除成功')
            this.getGamesDiscuss(this.pushGameId)
          }
        // }else{
        //   return false;
        // }
      },
      async deleteMusicDiscuss(musicDiscussId){
        // if(window.confirm('你确定要删除吗？')){
          const {data:res} = await this.$axios.post('v1/deleteMusicDiscuss',{discussId:this.discussList[musicDiscussId].discussId})
          if(res.code === 200){
            this.$message.success('删除成功')
            this.getMusicDiscuss(this.pushMusicId)
          }
        // }else{
        //   return false;
        // }
      },
      async likeClick(index){
        if(await this.userRoot() === 400){
          this.$message.error('账号已封禁,无法操作')
        }else{
          if(this.loginState === true){
            const likeArr = {
              userId: JSON.parse(sessionStorage.user).userId,
              discussId: this.discussList[index].discussId,
            }
            // 这里以下可以添加不同模块的方法
            const type = this.getDiscussType()
            if(type === "game"){
              if(this.discussList[index].liked === false){
                const {data:res} = await this.$axios.post("v1/gameLike",likeArr)
                if(res.code === 200){
                  this.$message.success("点赞成功！")
                  this.discussList[index].liked = true
                  this.discussList[index].likeNum++
                  const niceBox = document.getElementsByClassName("niceBox")[index]
                  niceBox.style.background = "var(--theme-discussButton)"
                  niceBox.style.color = "black"
                }else{
                  this.$message.success("点赞失败，请检查网络！")
                }
              }else if(this.discussList[index].liked === true){
                const {data:res} = await this.$axios.post("v1/gameDislike",likeArr)
                if(res.code === 200){
                  this.$message.success("取消点赞成功！")
                  this.discussList[index].liked = false
                  this.discussList[index].likeNum--
                  // this.discussList[index].likeNum = null
                  const niceBox = document.getElementsByClassName("niceBox")[index]
                  niceBox.style.background = "var(--theme-discussButton)"
                  niceBox.style.color = "black"
                }else{
                  this.$message.success("点赞失败，请检查网络！")
                }
              }
            }
            if(type === "movie"){
              if(this.discussList[index].liked === false){
                const {data:res} = await this.$axios.post("v1/movieLike",likeArr)
                if(res.code === 200){
                  this.$message.success("点赞成功！")
                  this.discussList[index].liked = true
                  this.discussList[index].likeNum++
                  const niceBox = document.getElementsByClassName("niceBox")[index]
                  niceBox.style.background = "var(--theme-discussButton)"
                  niceBox.style.color = "black"
                }else{
                  this.$message.success("点赞失败，请检查网络！")
                }
              }else if(this.discussList[index].liked === true){
                const {data:res} = await this.$axios.post("v1/movieDislike",likeArr)
                if(res.code === 200){
                  this.$message.success("取消点赞成功！")
                  this.discussList[index].liked = false
                  this.discussList[index].likeNum--
                  // this.discussList[index].likeNum = null
                  const niceBox = document.getElementsByClassName("niceBox")[index]
                  niceBox.style.background = "var(--theme-discussButton)"
                  niceBox.style.color = "black"
                }else{
                  this.$message.success("点赞失败，请检查网络！")
                }
              }
            }
            if(type === "music"){
              if(this.discussList[index].liked === false){
                const {data:res} = await this.$axios.post("v1/musicLike",likeArr)
                if(res.code === 200){
                  this.$message.success("点赞成功！")
                  this.discussList[index].liked = true
                  this.discussList[index].likeNum++
                  const niceBox = document.getElementsByClassName("niceBox")[index]
                  niceBox.style.background = "black"
                }else{
                  this.$message.success("点赞失败，请检查网络！")
                }
              }else if(this.discussList[index].liked === true){
                const {data:res} = await this.$axios.post("v1/musicDislike",likeArr)
                if(res.code === 200){
                  this.$message.success("取消点赞成功！")
                  this.discussList[index].liked = false
                  this.discussList[index].likeNum--
                  // this.discussList[index].likeNum = null
                  const niceBox = document.getElementsByClassName("niceBox")[index]
                  niceBox.style.background = "var(--theme-discussButton)"
                  niceBox.style.color = "black"
                }else{
                  this.$message.success("点赞失败，请检查网络！")
                }
              }
            }
          }else{
            this.$message.error("请先登录")
          }
        }

      },
      async complaintDisc(index){
        if(await this.userRoot() === 400){
          this.$message.error('账号已封禁,无法操作')
        }else{
          const type = this.getDiscussType()
          if(type === 'game'){
            this.$prompt('请输入举报原因', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(({ value }) => {
              const accusationObj = {
                userId: JSON.parse(sessionStorage.user).userId,
                discussId: this.discussList[index].discussId,
                userId_accusation: this.discussList[index].userId,
                discussContent: this.discussList[index].discussContent,
                accusationContent: value,
              }
              this.$axios.post('v1/addGameAccusation',accusationObj)
              this.$message.success('举报成功,等待管理员审核！')
            }).catch(() => {

            });
          }
          if(type === 'movie'){
            this.$prompt('请输入举报原因', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(({ value }) => {
              const accusationObj = {
                userId: JSON.parse(sessionStorage.user).userId,
                discussId: this.discussList[index].discussId,
                userId_accusation: this.discussList[index].userId,
                discussContent: this.discussList[index].discussContent,
                accusationContent: value,
              }
              this.$axios.post('v1/addMovieAccusation',accusationObj)
              this.$message.success('举报成功,等待管理员审核！')
            }).catch(() => {

            });
          }
          if(type === 'music'){
            this.$prompt('请输入举报原因', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(({ value }) => {
              const accusationObj = {
                userId: JSON.parse(sessionStorage.user).userId,
                discussId: this.discussList[index].discussId,
                userId_accusation: this.discussList[index].userId,
                discussContent: this.discussList[index].discussContent,
                accusationContent: value,
              }
              this.$axios.post('v1/addMusicAccusation',accusationObj)
              this.$message.success('举报成功,等待管理员审核！')
            }).catch(() => {

            });
          }
        }

      },
      showDiscussButton(index){
        $('#saySpace').css('display','block')
        this.discussListOpen = this.discussList[index]
      },
      getDiscussType(){
        const url = window.location.href;
        const urlArr = url.split("/")
        return urlArr[4]
      },
      judgeDiscussList(movieId,gameId,musicId){
        const type =  this.getDiscussType()
        if(type === "movie"){
          this.getMoviesDiscuss(movieId)
        }else if(type === "game"){
          this.getGamesDiscuss(gameId)
        }else if(type === "music"){
          this.getMusicDiscuss(musicId)
        }
      },
      getGamesDiscuss(gameData){
        this.$axios.post('v1/getGameDiscuss', {gameId:gameData}).then(res =>{
          let discussArr = res.data.data
          discussArr.map(list => {
            this.$set(list, 'isMoreOpen', false)
          })
          this.discussList = discussArr.reverse()
        })
      },
      getMoviesDiscuss(movieData){
        this.$axios.post('v1/getMovieDiscuss', {movieId:movieData}).then(res =>{
          let discussArr = res.data.data
          discussArr.map(list => {
            this.$set(list, 'isMoreOpen', false)
          })
          this.discussList = discussArr.reverse()
        })
      },
      getMusicDiscuss(musicData){
        this.$axios.post('v1/getMusicDiscuss', {musicId:musicData}).then(res =>{
          let discussArr = res.data.data
          discussArr.map(list => {
            this.$set(list, 'isMoreOpen', false)
          })
          this.discussList = discussArr.reverse()
        })
      },
      async pushDiscuss(){
        if(await this.userRoot() === 400){
          this.$message.error('账号已封禁,无法操作')
          return false
        }else{
          const discussContent = $("#addDiscussBox textarea").val()
          const newDiscussArr = {
            userId: JSON.parse(sessionStorage.user).userId,
            pushTime: this.dayjs().format('YYYY-MM-DD HH:mm:ss'),
            title: '',
            discussContent: discussContent,
          }
          const newDiscussShow = {
            nickname: JSON.parse(sessionStorage.user).nickname,
            title: '',
            headImg: JSON.parse(sessionStorage.user).headImg,
            discussContent: discussContent,
            pushTime: this.dayjs().format('YYYY-MM-DD HH:mm:ss'),
          }
          const type = this.getDiscussType()
          if(discussContent !== ''){
            if( type === 'game'){
              newDiscussArr.gameId = this.pushGameId
              const {data:res} = await this.$axios.post("v1/pushGameDiscuss", newDiscussArr)
              if(res.code === 200){
                this.discussList.unshift(newDiscussShow)
                this.getGamesDiscuss(this.pushGameId)
                $("#addDiscussBox input").val('')
                $("#addDiscussBox textarea").val('')
                this.$message.success("评论成功")
              }else{
                this.$message.error("评论失败")
              }
            }
            if( type === 'movie'){
              newDiscussArr.movieId = this.pushMovieId
              console.log(newDiscussArr)
              const {data:res} = await this.$axios.post("v1/pushMovieDiscuss", newDiscussArr)
              if(res.code === 200){
                this.discussList.unshift(newDiscussShow)
                this.getMoviesDiscuss(this.pushMovieId)
                $("#addDiscussBox input").val('')
                $("#addDiscussBox textarea").val('')
                this.$message.success("评论成功")
              }else{
                this.$message.error("评论失败")
              }

            }
            if( type === 'music'){
              newDiscussArr.musicId = this.pushMusicId
              const {data:res} = await this.$axios.post("v1/pushMusicDiscuss", newDiscussArr)
              if(res.code === 200){
                this.discussList.unshift(newDiscussShow)
                this.getMusicDiscuss(this.pushMusicId)
                $("#addDiscussBox input").val('')
                $("#addDiscussBox textarea").val('')
                this.$message.success("评论成功")
              }else{
                this.$message.error("评论失败")
              }

            }
          }else if(discussContent ===''){
            this.$message.warning("讨论内容不能为空")
          }
        }

      },
      async judgeLike(){
        if(this.loginState === true){
          for (const item of this.discussList) {
            let index = this.discussList.indexOf(item);
            const judgeLikeArr = {
              userId: JSON.parse(sessionStorage.user).userId,
              discussId: this.discussList[index].discussId,
            }
            const type = this.getDiscussType()
            if(type === "game"){
              const {data:res} = await this.$axios.post('v1/judgeGameLike',judgeLikeArr)
              if(res.code === 200){
                this.discussList[index].liked = true
                const niceBox = document.getElementsByClassName("niceBox")[index]
                niceBox.style.background = "var(--theme-like)"
              }
              if(res.code === 500){
                this.discussList[index].liked = false
              }
            }
            if(type === "movie"){
              const {data:res} = await this.$axios.post('v1/judgeMovieLike',judgeLikeArr)
              if(res.code === 200){
                this.discussList[index].liked = true
                const niceBox = document.getElementsByClassName("niceBox")[index]
                niceBox.style.background = "var(--theme-like)"
              }
              if(res.code === 500){
                this.discussList[index].liked = false
              }
            }
            if(type === "music"){
              const {data:res} = await this.$axios.post('v1/judgeMusicLike',judgeLikeArr)
              if(res.code === 200){
                this.discussList[index].liked = true
                const niceBox = document.getElementsByClassName("niceBox")[index]
                niceBox.style.background = "var(--theme-like)"
              }
              if(res.code === 500){
                this.discussList[index].liked = false
              }
            }
          }
        }
        // const {data:res} = await this.$axios.post('v1/judgeGameLike',)
      },
      openMore(index){
        this.discussList[index].isMoreOpen = !this.discussList[index].isMoreOpen
      },
      isLogin(){
        if(sessionStorage.token){
          this.loginState = true
          this.userId = JSON.parse(sessionStorage.user).userId;
        }else{
          this.loginState = false
          this.userId = null
        }
      },
      async userRoot(){
        if(this.loginState === true){
          const {data:res} = await this.$axios.post('v1/judgeRoot',{userId:JSON.parse(sessionStorage.user).userId})
          return res.data.rootCode
        }
      },
    },

    created() {
      this.judgeDiscussList(this.pushMovieId, this.pushGameId, this.pushMusicId)
      this.isLogin()
      // this.userRoot()
      // this.showDiscussButton()
    },
    mounted() {
    $(function () {
      $('#addNewDiscuss').click(function(){
        $('#addDiscussBox').toggle()
        return false;//阻止冒泡
      });
      $('#addDiscussBox').click(function(){
        return false;
      });
      $(document).click(function(){
        $('#addDiscussBox').css('display','none').hide();
      });

    })
    },
    updated() {
      this.judgeLike()
    }
  }
</script>

<style lang="less" scoped>
  #addNewDiscuss{
    width: 70px;
    height: 70px;
    background-color: var(--theme-button);
    margin-right: 20px;
    border-radius: 50%;
    position: fixed;
    right: 20px;
    bottom: 40px;
    display: grid;
    place-items: center;
    z-index: +1;
  }
  .isMoreOpen{
    display: block!important;
  }

  img{
    width: 35px;
  }

.disable:hover{
  border: solid 2px transparent;
  /*background-color: ;*/
}
  #discuss{
    width: 100%;
    cursor: default;
    /*background-color: #bfbfc1;*/
  /*#warning{*/
  /*  font-size: 16px;*/
  /*  font-weight: 900;*/
  /*  background-color: #9e5bdf;*/
  /*}*/
    #discussMainBox{
      /*width: 430px;*/
      width: 32.8%;
      //background-color: #d8d8df;
      border-radius: 6px;
      margin-bottom: 10px;
      position: relative;
    }
    #discussList:after {
      content: '';
      width: 32.8%;
    }
    /*#openIcon{*/
    /* margin-right: 20px;*/
    /*  font-size: 12px;*/
    /*  float: right;*/
    /*  cursor: pointer;*/
    /*  border-radius: 4px;*/
    /*  padding: 0 2px;*/
    /*  !*background-color: #6f39dd;*!*/
    /*}*/
    #discussUser{
      width: 100%;
      padding: 5px 0;
      border-radius: 6px 6px 0 0;
      display: flex;
      align-items: center;
      position: static;
      user-select: none;
    }
    h1{
      padding: 0 0 5px 0;
      font-size: 20px;
      width: 200px;
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap; //溢出不换行
    }
    h4{
      font-weight: 400;
      /*overflow:hidden;*/
      /*display:-webkit-box;*/
      /*-webkit-box-orient:vertical;*/
      /*-webkit-line-clamp:2;*/
      font-size: 14px;
      width: 200px;
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap; //溢出不换行
    }
  #discussList{
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    /*background-color: #b4b4b4;*/
    }

    /*#otherInfo{*/
    /*  width: 15px;*/
    /*  height: 15px;*/
    /*  border-radius: 50%;*/
    /*  background-color: red;*/
    /*  position: absolute;*/
    /*  top: 5px;*/
    /*  right: 5px;*/
    /*}*/
    .niceBox{
      border-radius: 4px;
      margin-right: 10px;
      margin-top: 5px;
      transition: width 0.2s ease-in-out;
      display: flex;
      width: 50px;
      align-items: center;
      fill: var(--theme-fontMain);
      padding: 5px 10px;
      position: relative;
      span{
        font-size: 14px;
        position: absolute;
        top: 3px;
        right: 20px;
        color: var(--theme-fontMain);
      }
    }
    .saySomething{
      fill: var(--theme-fontMain);
      border-radius: 4px;
      margin-top: 5px;
      padding: 5px 10px;
    }
    #pushTime{
      font-size: 12px;
      position: absolute;
      right: 20px;
      bottom: 0;
      cursor: auto;

    }
    #pushTime:hover{
      background-color: transparent!important;
      color: black;
      box-shadow: 0 0 0;
      transform: translate3d(0, 0, 0);
    }
    .discussInfo{
      padding: 20px 20px 5px 20px;
    }
    .functionBox{
      width: 100%;
      /*padding-bottom: 20px;*/
      /*background-color: red;*/
      border-radius: 0 0 6px 6px;
      display: flex;
      position: static;
      align-items: center;
      user-select:none;
      margin-bottom: 20px;
      z-index: +1;
    }
    #addDiscussBox{
      width: 650px;
      backdrop-filter: blur(10px);
      position: fixed;
      right: 100px;
      bottom: 110px;
      border-radius: 6px 6px 6px 6px;
      padding: 20px;
      user-select: none;
      display: none;
      z-index: +2;

      textarea{
        border-radius: 6px;
        height: 220px;
        resize: none;
        padding: 5px 10px;
        margin-bottom: 20px;
        margin-top: 6px;
      }
      input{
        margin-bottom: 20px;
        margin-top: 6px;
      }
      span{
        margin-bottom: 6px;
        color: var(--theme-fontMain);
      }


    }

    /*li:hover{*/
    /*  box-shadow: -2px 2px 0 #b4b4b4;*/
    /*  transform: translate3d(2px, -2px, 0);*/
    /*}*/
    .functionBox ul{
      padding: 0 40px 0 40px;
      margin-top: 10px;
      li{
        display: inline-block;
        /*margin-right: 10px;*/
        cursor: pointer;
        transition: all 0.1s ease-in-out;
        background-color: var(--theme-discussButton);
      }
      //li:hover{
      //  background-color: #1f1f1f!important;
      //  color: white!important;
      //}
    }
    .discussBox{
      border-radius: 0 0 6px 6px;
      margin-bottom: 10px;
      transition: all 0.1s ease-in-out;
      overflow: hidden;
      white-space: normal;
      z-index: +1;
    }
    #sayBox h1{
      padding: 20px 20px 5px 20px;
      font-size: 20px;
    }
    #more{
      border-radius: 6px;
      transition:all 0.1s ease-in-out;
    }
    #more:hover{
      background-color: black;
    }
    #more:hover #moreIcon{
      fill: white;
    }
    #openMore{
      user-select: none;
      transition: all 0.1s ease-in-out;
      ul li{
        padding: 0 5px;
        transition: all 0.1s ease-in-out;
      }
      ul li:hover{
        //background-color: black;
        //color:white
      }
    }
svg{
  display: grid;
  place-items: center;
}
  }


</style>
